<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的内边距</title>
    <style>

        div{
            width:200px;
            height:200px;
            background:red;
            /*设置元素的内间距 让内容和元素的边框有一定距离*/
            /*注意:在使用padding的时候,会改变我们元素的实际大小*/
            /*padding-top:30px;*/
            /*padding-left:30px;*/
            /*padding-bottom:30px;*/
            /*padding-right:30px;*/

            /*padding:设置四个值的时
                第一个值代表元素顶部的内间距
                第二个值代表的是元素右边的内间距
                第三个值代表的是元素底边的内间距
                第四个值代表元素左边的内间距
            */
            /*padding:10px 20px 10px 20px;*/

            /*padding:设置两个值时
                第一个值代表上下对边的间距
                第二个值代表左右对边的间距
            */
            /*padding:10px 30px;*/

            /*padding:设置一个值时
                代表四个边的间距
            */

            padding:30px;
        }
    </style>
</head>
<body>
    <!--内边距: 指的是元素距离元素内部元素的间距-->
    <div>你好</div>
</body>
</html>